<template>
  <el-dialog
    v-model="visible"
    title="批量角色变更"
    width="500px"
    :before-close="handleClose"
  >
    <div class="batch-role-content">
      <!-- 选中成员列表 -->
      <div class="selected-members">
        <h4 class="section-title">选中成员 ({{ selectedMembers.length }})</h4>
        <div class="member-list">
          <div 
            v-for="member in selectedMembers" 
            :key="member.userId"
            class="member-item"
          >
            <el-avatar 
              :size="32"
              :src="member.avatarUrl"
              :icon="UserFilled"
            >
              {{ member.nickname?.charAt(0) || member.username?.charAt(0) }}
            </el-avatar>
            <div class="member-info">
              <div class="member-name">{{ member.nickname || member.username || `用户${member.userId}` }}</div>
              <el-tag 
                :type="getMemberRoleType(member.role)" 
                size="small"
              >
                {{ getMemberRoleLabel(member.role) }}
              </el-tag>
            </div>
          </div>
        </div>
      </div>

      <!-- 目标角色选择 -->
      <div class="target-role">
        <h4 class="section-title">目标角色</h4>
        <el-radio-group v-model="targetRole" @change="handleRoleChange">
          <div class="role-options">
            <el-radio 
              v-for="role in availableRoles" 
              :key="role.value"
              :value="role.value"
              :disabled="!role.available"
              class="role-option"
            >
              <div class="role-content">
                <div class="role-icon">
                  <el-icon :size="20">
                    <component :is="role.icon" />
                  </el-icon>
                </div>
                <div class="role-info">
                  <div class="role-name">{{ role.label }}</div>
                  <div class="role-description">{{ role.description }}</div>
                  <div v-if="!role.available" class="role-reason">{{ role.reason }}</div>
                </div>
              </div>
            </el-radio>
          </div>
        </el-radio-group>
      </div>

      <!-- 变更预览 -->
      <div v-if="targetRole" class="change-preview">
        <h4 class="section-title">变更预览</h4>
        <div class="preview-list">
          <div 
            v-for="member in selectedMembers" 
            :key="member.userId"
            class="preview-item"
            :class="{ 'no-change': member.role === targetRole }"
          >
            <div class="member-name">{{ member.nickname || member.username || `用户${member.userId}` }}</div>
            <div class="role-change">
              <el-tag 
                :type="getMemberRoleType(member.role)" 
                size="small"
              >
                {{ getMemberRoleLabel(member.role) }}
              </el-tag>
              <el-icon class="arrow-icon"><ArrowRight /></el-icon>
              <el-tag 
                :type="getMemberRoleType(targetRole)" 
                size="small"
              >
                {{ getMemberRoleLabel(targetRole) }}
              </el-tag>
            </div>
            <div v-if="member.role === targetRole" class="no-change-hint">
              <el-icon><InfoFilled /></el-icon>
              <span>无需变更</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 变更统计 -->
      <div v-if="targetRole" class="change-stats">
        <el-descriptions :column="2" size="small" border>
          <el-descriptions-item label="总成员">{{ selectedMembers.length }}</el-descriptions-item>
          <el-descriptions-item label="需要变更">{{ membersToChange.length }}</el-descriptions-item>
        </el-descriptions>
      </div>

      <!-- 权限说明 -->
      <div v-if="targetRole" class="permission-info">
        <h4 class="section-title">{{ getMemberRoleLabel(targetRole) }} 权限</h4>
        <div class="permission-list">
          <div 
            v-for="permission in getRolePermissions(targetRole)" 
            :key="permission"
            class="permission-item"
          >
            <el-icon class="permission-icon"><Check /></el-icon>
            <span>{{ permission }}</span>
          </div>
        </div>
      </div>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button 
          type="primary" 
          @click="handleConfirm"
          :disabled="!targetRole || membersToChange.length === 0"
          :loading="loading"
        >
          变更 {{ membersToChange.length }} 个成员角色
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { ElMessage } from 'element-plus'
import {
  UserFilled,
  User,
  Management,
  Star,
  ArrowRight,
  InfoFilled,
  Check
} from '@element-plus/icons-vue'
import { useI18n } from 'vue-i18n'
import type { TeamMember } from '@/types/team'
import { 
  getMemberRoleLabel, 
  getMemberRoleType,
  canUpdateMemberRole 
} from '@/types/team'

interface Props {
  modelValue: boolean
  selectedMembers: TeamMember[]
  currentUserRole: string
}

interface Emits {
  (e: 'update:modelValue', value: boolean): void
  (e: 'confirm', members: TeamMember[], newRole: string): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()
const { t } = useI18n()

// 响应式数据
const visible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

const targetRole = ref<string>('')
const loading = ref(false)

// 可用角色选项
const availableRoles = computed(() => {
  const roles = [
    {
      value: 'MEMBER',
      label: '普通成员',
      description: '可以查看团队信息和参与协作',
      icon: User,
      available: canUpdateMemberRole(props.currentUserRole, 'MEMBER'),
      reason: !canUpdateMemberRole(props.currentUserRole, 'MEMBER') ? '权限不足' : ''
    },
    {
      value: 'ADMIN',
      label: '管理员',
      description: '可以管理成员、邀请新成员、管理团队设置',
      icon: Management,
      available: canUpdateMemberRole(props.currentUserRole, 'ADMIN'),
      reason: !canUpdateMemberRole(props.currentUserRole, 'ADMIN') ? '权限不足' : ''
    },
    {
      value: 'OWNER',
      label: '所有者',
      description: '拥有团队的完全控制权',
      icon: Star,
      available: props.currentUserRole === 'OWNER',
      reason: props.currentUserRole !== 'OWNER' ? '只有所有者可以设置' : ''
    }
  ]

  return roles
})

// 需要变更的成员
const membersToChange = computed(() => {
  return props.selectedMembers.filter(member => member.role !== targetRole.value)
})

// 获取角色权限说明
const getRolePermissions = (role: string) => {
  const permissions = {
    MEMBER: [
      '查看团队信息',
      '参与团队协作',
      '查看团队成员'
    ],
    ADMIN: [
      '管理团队成员',
      '邀请新成员',
      '管理团队设置',
      '生成邀请码'
    ],
    OWNER: [
      '完全控制团队',
      '转移所有权',
      '删除团队',
      '管理所有权限'
    ]
  }
  return permissions[role as keyof typeof permissions] || []
}

// 处理角色变更
const handleRoleChange = () => {
  // 角色变更时的处理逻辑
}

// 处理确认
const handleConfirm = async () => {
  if (!targetRole.value || membersToChange.value.length === 0) {
    ElMessage.warning('请选择目标角色')
    return
  }
  
  loading.value = true
  try {
    emit('confirm', membersToChange.value, targetRole.value)
  } finally {
    loading.value = false
  }
}

// 处理关闭
const handleClose = () => {
  targetRole.value = ''
  visible.value = false
}

// 监听对话框打开
watch(visible, (newVal) => {
  if (newVal) {
    targetRole.value = ''
  }
})
</script>

<style scoped lang="scss">
.batch-role-content {
  .section-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--el-text-color-primary);
    margin: 0 0 12px 0;
  }

  .selected-members {
    margin-bottom: 24px;

    .member-list {
      max-height: 150px;
      overflow-y: auto;
      border: 1px solid var(--el-border-color-light);
      border-radius: 6px;

      .member-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px;
        border-bottom: 1px solid var(--el-border-color-lighter);

        &:last-child {
          border-bottom: none;
        }

        .member-info {
          flex: 1;

          .member-name {
            font-size: 14px;
            color: var(--el-text-color-primary);
            margin-bottom: 4px;
          }
        }
      }
    }
  }

  .target-role {
    margin-bottom: 24px;

    .role-options {
      display: flex;
      flex-direction: column;
      gap: 12px;

      .role-option {
        width: 100%;

        .role-content {
          display: flex;
          align-items: center;
          gap: 12px;
          padding: 12px;
          border: 1px solid var(--el-border-color-light);
          border-radius: 6px;
          transition: all 0.3s ease;

          &:hover {
            border-color: var(--el-color-primary-light-5);
            background: var(--el-color-primary-light-9);
          }

          .role-icon {
            width: 40px;
            height: 40px;
            border-radius: 6px;
            background: var(--el-color-primary-light-8);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--el-color-primary);
          }

          .role-info {
            flex: 1;

            .role-name {
              font-size: 14px;
              font-weight: 600;
              color: var(--el-text-color-primary);
              margin-bottom: 4px;
            }

            .role-description {
              font-size: 12px;
              color: var(--el-text-color-secondary);
              line-height: 1.4;
            }

            .role-reason {
              font-size: 12px;
              color: var(--el-color-danger);
              margin-top: 4px;
            }
          }
        }
      }
    }
  }

  .change-preview {
    margin-bottom: 24px;

    .preview-list {
      max-height: 200px;
      overflow-y: auto;
      border: 1px solid var(--el-border-color-light);
      border-radius: 6px;

      .preview-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px;
        border-bottom: 1px solid var(--el-border-color-lighter);

        &:last-child {
          border-bottom: none;
        }

        &.no-change {
          opacity: 0.6;
          background: var(--el-bg-color-page);
        }

        .member-name {
          font-size: 14px;
          color: var(--el-text-color-primary);
          flex: 1;
        }

        .role-change {
          display: flex;
          align-items: center;
          gap: 8px;

          .arrow-icon {
            color: var(--el-text-color-secondary);
          }
        }

        .no-change-hint {
          display: flex;
          align-items: center;
          gap: 4px;
          font-size: 12px;
          color: var(--el-text-color-secondary);
        }
      }
    }
  }

  .change-stats {
    margin-bottom: 24px;
  }

  .permission-info {
    .permission-list {
      .permission-item {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 6px 0;
        font-size: 14px;
        color: var(--el-text-color-regular);

        .permission-icon {
          color: var(--el-color-success);
          font-size: 16px;
        }
      }
    }
  }
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
</style>
